<!-- 这是后台管理系统的登录界面 -->
<template>
  <div class="admin-login">
    <h1>富贵公司ERP系统</h1>
    <div class="admin-login-form">
      <el-form :model="formLoginData" :rules="rules" ref="submitForm">
        <el-form-item size="normal" prop="username">
          <el-input
            class="Login-form-uname"
            placeholder="用户名"
            v-model="formLoginData.username"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item size="normal" prop="userpassword">
          <el-input
            class="Login-form-pwd"
            v-model="formLoginData.userpassword"
            placeholder="密码"
            autocomplete="off"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="" size="normal">
          <el-button
            type="primary"
            class="Login-form-submit"
            @click.stop="handelSubmit('submitForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>

      <button class="Login-form-regist" @click="handelGoRegist">
        点击注册
      </button>
      <div class="Login-tips">
        <p>没有账号请先进行注册</p>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//在vue中安装element插件

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里进行数据表单验证
    //账号的验证3-11位字母数字下划线
    let valdataname = (rule, value, callback) => {
      let reg = /^\w{3,11}$/;
      if (value == "") {
        console.log(1);
        return callback(new Error("账号不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("账号必须是3-11为字母数字下划线"));
      } else {
        callback();
      }
    };
    //密码的验证字母开头，五位以上
    let valdatapwd = (rule, value, callback) => {
      let reg2 = /^[a-zA-Z]\w{4,}/;
      if (value == "") {
        callback(new Error("密码不能为空"));
      } else if (!reg2.test(value)) {
        callback(new Error("密码必须以字母开头且5位以上"));
      } else {
        callback();
      }
    };
    //这里存放数据
    return {
      //表单的数据
      formLoginData: {
        username: "",
        userpassword: "",
      },
      //表单规则
      rules: {
        username: [{ validator: valdataname, trigger: ["blur", "change"] }],
        userpassword: [{ validator: valdatapwd, trigger: ["blur", "change"] }],
      },
      productlist: [],
      flag:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getInform: function () {
      var list = localStorage.getItem("information_user") || "[]"; //字符串
      return JSON.parse(list);
    },
    setInform: function (arr) {
      localStorage.setItem("information_user", JSON.stringify(arr));
    },
    handelSubmit: function (submitform) {
      this.$refs[submitform].validate((valid) => {
        //  console.log(valid, obj);
        // let username = this.formLoginData.username;
        // let password = this.formLoginData.userpassword;
        // localStorage.setItem("name", username);
        // localStorage.setItem("password", password);
        if (valid) {
          this.productlist = this.getInform();
          for (var j = 0; j < this.productlist.length; j++) {
            this.flag = false;
            if (
              this.formLoginData.username == this.productlist[j].id &&
              this.productlist[j].pwd == this.formLoginData.userpassword 
            ) {
              alert("登录成功");
               sessionStorage.setItem("name",this.formLoginData.username)
              this.$router.push({
                path:'/dashboard'
              })
            }
          }
        }
       
      });
    },
    handelGoRegist: function () {
      this.$router.push({
        path: "/regist",
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
div.admin-login {
  width: 100vw;
  height: 100vh;
  background: url(../assets/static/img/bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 100px;
  h1 {
    height: 42px;
    width: 300px;
    text-align: center;
    margin-top: 150px;
    margin-left: 850px;
    color: seashell;
  }

  div.admin-login-form {
    width: 500px;
    height: 300px;
    background: rgba(0, 0, 0, 0.2);
    margin-left: 750px;
    text-align: center;
    padding: 30px 80px;
    border-radius: 10px;
    .Login-form-submit {
      width: 100%;
    }
  }
  .Login-form-regist {
    width: 100%;
    height: 20px;
    padding-left: 250px;
    line-height: 20px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    color: #ff6700;
  }
  .Login-tips {
    color: red;
  }
}
</style>